<template>
  <div>
    <el-card class="card">
      <!-- 搜索 -->
      <SearchForm
          :searchConfig="searchConfig"
          :form_data.sync="listQuery"
          @search="search"
          @reset="reset"
          v-if="searchConfig.length > 0"
      ></SearchForm>

      <!-- 列表 -->
      <Table
        v-loading="loading"
        ref="Table"
        :data="tableData"
        :config="tableConfig"
        :handlerBtnConfig="handlerBtnConfig"
      >
        <template slot="operation" slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </Table>

      <Pagination :currentPage="listQuery.pageNum" :pageSize="listQuery.pageSize" :total="total" @handleChange="handleChange"/>
    </el-card>

    <!-- 编辑与添加 -->
    <dict-form ref="addForm" @saveAfter="saveAfter"/>

  </div>
</template>

<script>

import SearchForm from '@/common/SearchForm'
import Table from '@/common/Table'
import Pagination from '@/common/Pagination'
import DictForm from './dictForm'
import { tableConfig, searchConfig } from './dictConfig'
import { getDictList, deleteByLogic, deleteByIds } from '@/api/sys/dict'

export default {
  components: {
    SearchForm,
    Table,
    Pagination,
    DictForm
  },
  data() {
    return {
      loading: false,
      tableData: [],
      tableConfig: tableConfig(),
      searchConfig: searchConfig(),
      handlerBtnConfig: [
        {
          label: "新增",
          type: "primary",
          size: "mini",
          round: false,
          plain: false,
          icon: "el-icon-plus",
          handler: () => {
            this.handleAdd()
          }
        },
        {
          label: "删除",
          type: "danger",
          size: "mini",
          round: false,
          plain: false,
          icon: "el-icon-delete",
          handler: (queryParams, multipleSelection) => {
            this.handleDeleteByIds(multipleSelection);
          },
        }
      ],
      listQuery: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0
    }
  },
  created() {
    this.handleGetList()
  },
  methods: {
    search() {
      this.listQuery.pageNum = 1
      this.handleGetList()
    },
    reset() {
      this.listQuery = {
        pageNum: 1,
        pageSize: 10
      }
    },
    // 获取列表
    handleGetList() {
      getDictList(this.listQuery).then(res => {
        if (res.status === 200) {
          this.tableData = res.data.list
          this.total = res.data.total
        }
      })
    },
    // 分页事件
    handleChange(pageParam) {
      this.listQuery.pageNum = pageParam.currentPage
      this.listQuery.pageSize = pageParam.pageSize
      this.handleGetList()
    },
    // 添加
    handleAdd: function() {
      this.$refs.addForm.create()
    },
    // 编辑
    handleEdit: function(id) {
      this.$refs.addForm.update(id)
    },
    saveAfter() {
      this.handleGetList()
    },
    // 删除
    handleDelete(id) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          deleteByLogic(id).then(res => {
              if (res.status === 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                this.handleGetList()
              } else {
                this.$message({
                  type: 'info',
                  message: res.message
                })
              }
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除！'
          })
        })
    },
    // 批量删除
    handleDeleteByIds(multipleSelection) {
      if (multipleSelection.length <= 0) {
        this.$message({
          type: 'info',
          message: '请至少选择一条数据！'
        })
        return
      }
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const idList = []
        multipleSelection.forEach(row => {
          idList.push(row.id)
        });
        const ids = idList.join(',')
        deleteByIds(ids).then(res => {
            if (res.status === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.handleGetList()
            } else {
              this.$message({
                type: 'info',
                message: res.message
              })
            }
          })
      })
      .catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除！'
        })
      })
    }
  }
}
</script>

<style scoped>
.card {
  height: 100%;
  margin: 15px;
}
</style>

 